【图表】highcharts 3D立体透明饼图 带背景 vue |
您所在的位置：网站首页 › vue 3d饼图 › 【图表】highcharts 3D立体透明饼图 带背景 vue |
|
echarts画3D图没有highcharts方便，所以这里画立体图选择了highcharts 首先安装依赖： npm install highcharts --save 新建页面：index.vue optionData是需要传入的数据 import Pie3D from "./pie.vue"; export default { name: "home", data() { return { optionData: [ { name: "数据一", value: 20, }, { name: "数据二", value: 15, }, { name: "数据三", value: 35, }, { name: "数据四", value: 10, }, { name: "数据五", value: 20, }, ], }; }, components: { Pie3D, }, }; .safeEvent{ background: #072956; height: 100vh; padding:50px } 复制代码新建组件：Pie3D.vue 单独把饼图提出来作为子组件，方便复用 class=bg是为了设置背景图片 id写成动态的，方便一个页面多次引用 chart定义在data外，优化页面卡顿 import Highcharts from "highcharts/highstock"; import HighchartsMore from "highcharts/highcharts-more"; import HighchartsDrilldown from "highcharts/modules/drilldown"; import Highcharts3D from "highcharts/highcharts-3d"; HighchartsMore(Highcharts); HighchartsDrilldown(Highcharts); Highcharts3D(Highcharts); let chart = null; export default { name: "", props: { optionData: { type: Array, default: () => { return []; }, }, id: { type: String, default: () => { return "main" + Math.random(); }, }, }, watch: { optionData: { deep: true, handler() { this.$nextTick(() => { this.dealData(); this.init(); }); }, }, }, data() { return { dataList: [], }; }, mounted() { this.init(); window.addEventListener("resize", () => { this.init(); chart.reflow(); }); }, created() { this.dealData(); }, methods: { dealData() { this.dataList = this.optionData.map((item) => { item["y"] = item["value"]; return item; }); }, init() { let color1 = [ "rgba(135,208,81,0.6)", "rgba(48,154,227,0.6)", "rgba(67,106,218,0.6)", "rgba(217,95,95,0.6)", "rgba(205,217,101,0.6)", ]; let _this=this chart = Highcharts.chart(this.id, { colors: color1, chart: { type: "pie", backgroundColor: null, animation: false, marginTop: 20, spacingTop: 0, options3d: { enabled: true, alpha: 50, }, spacingTop: 0, spacingLeft: 0, spacingRight: 0, }, legend: { //图例 align: "center", //程度标的目标地位 layout: "horizontal", verticalAlign: "top", //垂直标的目标地位 padding: 2, margin: 0, itemStyle: { cursor: "pointer", color: "#FFFFFF", fontWeight: 100, backgroundColor: ["#ccc"], }, itemHoverStyle: { color: "#FFFFFF", }, }, tooltip: { //提示框 backgroundColor: "rgba(20,77,155,0.9000)", borderColor: "#34A6FF", color: "#fff", useHTML: true, pointFormat: '{point.percentage:.1f}%', itemStyle: { color: "#FFFFFF", }, formatter: function () { let s = '' + this.key + "：" + this.y + "%"; return s; }, }, title: { //标题 text: null, }, credits: { enabled: false, //不显示LOGO }, plotOptions: { pie: { allowPointSelect: false, cursor: "pointer", depth: 20, textShadow: false, softConnector: false, states: { inactive: { opacity: 1, size: "100%", }, }, }, }, series: [ { type: "pie", name: "", showInLegend: true, // 默认值 data: this.dataList, dataLabels: { enabled: true, alignTo: "toPlotEdges", y: -14, connectorColor: "rgba(133, 205, 247, 1)", //引导线 connectorShape: function (labelPosition, connectorPosition) { var touchingSliceAt = connectorPosition.touchingSliceAt, alignment = labelPosition.alignment, left = 0, right = 0; if (alignment == "left") { left = labelPosition.x + this.dataLabel.bBox.width + 14; right = labelPosition.x + 2; } else { left = labelPosition.x - this.dataLabel.bBox.width - 14; right = labelPosition.x - 2; } return [ "M", left, labelPosition.y, "L", right, labelPosition.y, "L", touchingSliceAt.x, touchingSliceAt.y, ]; }, formatter: function () { let dd = _this.optionData.filter(item=>{ if(item.name===this.key){ return item } }) return dd[0].y+'%' || '' ; }, distance: 20, style: { color: "#FFFFFF", fontSize: "12px", textOutline: "none", fontWeight: "400", }, }, }, ], }); }, }, }; .bg { z-index: 999; width: 100%; height: 100%; position: relative; background-image: url("../assets/dizuo.png"); background-size: 65% 70%; background-repeat: no-repeat; background-position-x: center; background-position-y: 80%; } 复制代码 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |